@use "../scss/pixelmatrix" as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #3b4150;
  font-family: Arial, Helvetica, sans-serif;
  color: #cdcdcd;
}
@mixin stat-bar($color, $direction) {
  $color-dark: darken($color, 20%);
  background-image: linear-gradient(
    $direction,
    $color 0,
    $color 47%,
    $color-dark 50%,
    $color-dark 100%
  );
}
@mixin bar-animation($duration, $dimension) {
  visibility: hidden;
  @if $dimension == width {
    width: 0;
    animation-name: animation-width;
  }
  @if $dimension == height {
    height: 0;
    animation-name: animation-height;
  }
  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: calc($duration * 2);
  animation-fill-mode: forwards;
}
@keyframes animation-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animation-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
#bar-chart {
  height: 380px;
  width: 70%;
  position: relative;
  margin: 50px auto 0;
  .graph {
    height: 283px;
    position: relative;
    ul {
      list-style: none;
      &.x-axis {
        bottom: 0;
        position: absolute;
        text-align: center;
        width: 100%;
        li {
          float: left;
          margin-right: 10.5%;
          font-size: 11px;
          width: 11.5%;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      &.y-axis {
        position: absolute;
        text-align: right;
        width: 100%;
        li {
          border-top: 1px solid #4e5464;
          display: block;
          height: calc(253px / 4);
          width: 100%;
          span {
            display: block;
            font-size: 11px;
            margin: -10px 0 0 -60px;
            padding: 0 10px;
            width: 40px;
          }
        }
      }
    }
    .bars {
      height: 253px;
      position: absolute;
      width: 100%;
      z-index: 10;
      padding: 0 2%;
      .bar-group {
        display: block;
        float: left;
        height: 100%;
        position: relative;
        width: 12%;
        margin-right: 10%;
        &:last-child {
          margin-right: 0;
        }
        .bar {
          @include bar-animation(0.2s, height);
          box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
          border-radius: 3px 3px 0 0;
          bottom: 0;
          height: 0;
          width: 25%;
          cursor: pointer;
          position: absolute;
          text-align: center;
          &:nth-child(2) {
            left: 35%;
          }
          &:nth-child(3) {
            left: 70%;
          }
          span {
            display: none;
          }
        }
        @for $i from 1 through 15 {
          .bar-#{$i} {
            animation-delay: calc(#{$i} * 0.1s + 0.2s);
          }
        }
        .stat-1 {
          @include stat-bar(#ff4500, to right);
        }
        .stat-2 {
          @include stat-bar(#b8f123, to right);
        }
        .stat-3 {
          @include stat-bar(#00c5ff, to right);
        }
      }
    }
  }
}

.art {
  @include pixelmatrix;
}
